import React, {PureComponent} from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import {
  Text,
  View,
  ExpandableSection,
  SegmentedControl,
  Colors,
  Icon,
} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

const chevronDown = require('../../assets/icons/chevronDown.png');
const chevronUp = require('../../assets/icons/chevronUp.png');
const infoIcon = require('../../assets/icons/info.png');
const DEFAULT = undefined;
const PARTIALLY_EXPANDED_HEIGHT = 100;
const FULLY_EXPANDED_HEIGHT = 300;

class ExpandableSectionScreen extends PureComponent {
  state = {
    expanded: false,
    minHeight: DEFAULT,
  };

  onExpand = () => {
    this.setState({
      expanded: !this.state.expanded,
    });
  };

  getChevron(expanded: boolean) {
    return expanded ? chevronUp : chevronDown;
  }

  renderReadMoreHeader = () => {
    const {expanded} = this.state;
    return (
      <View marginH-page marginT-10 row>
        <Text text80 marginL-40 marginR-5 $textPrimary>
          Read More
        </Text>
        <Icon
          style={styles.icon}
          source={this.getChevron(expanded)}
          tintColor={Colors.$iconPrimary}
        />
      </View>
    );
  };

  renderHeader = (
    text: string,
    expanded: boolean,
    {disabled, showInfo}: {disabled?: boolean; showInfo?: boolean} = {},
  ) => {
    return (
      <View marginH-page marginV-20 spread row>
        <View row>
          {showInfo ? (
            <Icon
              source={infoIcon}
              marginR-10
              tintColor={disabled ? Colors.grey40 : undefined}
            />
          ) : null}
          <Text text60 marginL-4 grey40={disabled}>
            {text}
          </Text>
        </View>
        <Icon
          style={styles.icon}
          source={this.getChevron(expanded)}
          tintColor={disabled ? Colors.grey40 : undefined}
        />
      </View>
    );
  };

  renderContent() {
    return (
      <View marginH-60>
        <Text text80>
          If you have any questions, comments, or concerns, please don&apos;t
          hesitate to get in touch with us. You can easily reach out to us
          through our contact form on our website.
        </Text>
        <Text text80>
          Alternatively, you can reach us via email at help@help.com, where our
          team is ready to assist you promptly. If you prefer speaking with
          someone directly, feel free to give us a call at 1-833-350-1066.
        </Text>
      </View>
    );
  }

  renderOptions = () => {
    return (
      <View marginH-page>
        <Text text70BO marginB-8>
          Minimum Height
        </Text>
        <Text text80 marginB-16>
          The expandable section can be either fully collapsed, partially
          expanded to reveal some of the items, or fully expanded by default.
        </Text>
        <SegmentedControl
          activeColor={Colors.$textDefaultLight}
          activeBackgroundColor={Colors.$backgroundInverted}
          segments={[
            {label: 'Default'},
            {label: 'Partially'},
            {label: 'Fully Expanded'},
          ]}
          onChangeIndex={index => {
            switch (index) {
              case 0:
                return this.setState({minHeight: DEFAULT});
              case 1:
                return this.setState({minHeight: PARTIALLY_EXPANDED_HEIGHT});
              case 2:
                return this.setState({minHeight: FULLY_EXPANDED_HEIGHT});
            }
          }}
        />
      </View>
    );
  };

  renderExpandableSection = () => {
    const {expanded, minHeight} = this.state;
    return (
      <ExpandableSection
        top={minHeight === PARTIALLY_EXPANDED_HEIGHT}
        expanded={expanded}
        sectionHeader={
          minHeight === PARTIALLY_EXPANDED_HEIGHT
            ? this.renderReadMoreHeader()
            : this.renderHeader('How can I contact you?', expanded, {
                showInfo: true,
              })
        }
        onPress={this.onExpand}
        minHeight={minHeight}>
        {this.renderContent()}
      </ExpandableSection>
    );
  };

  renderNextItem() {
    return this.renderHeader('Where are you located?', false, {
      disabled: true,
      showInfo: true,
    });
  }

  render() {
    const {minHeight} = this.state;
    return (
      <TestSuite name="ExpandableSection">
        <TestCase itShould="例子">
          <View padding-10>
            <ScrollView>
              <Text text40 margin-20>
                ExpandableSection
              </Text>
              {this.renderOptions()}
              {this.renderExpandableSection()}
              {minHeight !== PARTIALLY_EXPANDED_HEIGHT
                ? this.renderNextItem()
                : null}
            </ScrollView>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default ExpandableSectionScreen;

const styles = StyleSheet.create({
  icon: {
    alignSelf: 'center',
  },
});
